<template>
	<view :class="['orderDetail',device == 'ios'?'iosPadding':'androidPadding']">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view class="pageTitle dFlex jBetween_aCenter">
				<view class="backIcon imgPublic" @tap.stop='back'>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/backIcon2.png" mode="widthFix"></image>
				</view>
				<view class="title" v-if="datas.status == '0'">等待买家付款</view>
				<view class="title" v-if="datas.status == '10'">买家已付款</view>
				<view class="title" v-if="datas.status == '20'">卖家已发货</view>
				<view class="title" v-if="datas.status == '30'">已收货</view>
				<view class="title" v-if="datas.status == '40'">退货中</view>
				<view class="title" v-if="datas.status == '50'">已退货</view>
				<view class="title" v-if="datas.status == '60'">交易完成</view>
				<view class="title" v-if="datas.status == '90'">已关闭</view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<!-- <view class="add dFlex jStart_aStart" v-if='!datas.source'> -->
		<view class="add dFlex jStart_aStart" v-if="!datas.source">
			<view class="addIcon imgPublic">
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/addIcon.png" mode="widthFix"></image>
			</view>
			<view class="selAdd">
				<view class="userInfo">
					<text class="username">{{datas.receive_address_json.receiver}}</text>
					<text class="tel">{{datas.receive_address_json.phone}}</text>
				</view>
				<view class="showAdd">{{datas.receive_address_json.address + datas.receive_address_json.address_detail}}</view>
			</view>
		</view>
		<view class="add" v-if="datas.source">
			<view class="user">提货人：{{datas.receive_address_json.receiver}} {{datas.receive_address_json.phone}}</view>
			<!-- <view class="address">
				<view class="addDetail">自提点：{{datas.address_json.store_name?datas.address_json.store_name:'暂未填写'}}</view>
				<view class="storeInfo dFlex jStart_aStart">
					<view class="showAdd">{{datas.address_json.address + datas.address_json.address_detail}}</view>
				</view>
			</view> -->
		</view>
		<view class="teamInfo" v-if='datas.address_json.id'>
			<view class="userInfo dFlex jBetween_aCenter">
				<view class="tuanzhang dFlex jStart_aCenter">
					<view class="userTx imgPublic">
						<image v-if="datas.address_json.store_imgs" :src="datas.address_json.store_imgs"></image>
						<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/assets/img/store.jpg"></image>
					</view>
					<text style="display: inline-block;width: 230px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{datas.address_json.store_name?datas.address_json.store_name:datas.address_json.receiver}}</text>
					<view class="tag">提货点</view>
				</view>
			</view>
			<view class="base dFlex jBetween_aCenter">
				<view class="baseLeft dFlex jStart_aStart">
					<view class="titles dFlex jStart_aStart">
						<view class="addIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/add1.png" mode="widthFix"></image>
						</view>
						<text>提货地址:</text>
					</view>
					<view class="info_content">{{datas.address_json.address_detail?datas.address_json.address_detail:datas.address_json.address}}</view>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="content">
				<view class="shangpin dFlex jStart_aStart" v-for="(shop,idx) in datas.ordergoods" :key='idx'>
					<view class="shopImg imgPublic">
						<image :src="shop.goods.main_img" mode="widthFix"></image>
					</view>
					<view class="other">
						<view class="dFlex jBetween_aStart">
							<view class="shopName">{{shop.goods.title}}</view>
							<view class="user dFlex jStart_aCenter">
								<text class="rmb">￥</text>
								<text class="price">{{shop.total_money}}</text>
							</view>
						</view>
						<view class="selSpec dFlex jBetween_aCenter">
							<view class="spec">规格：{{shop.goods_attr?shop.goods_attr:'默认'}}</view>
							<text>x{{shop.goods_num}}</text>
						</view>
						<view 
							@click="afterSale(shop)" 
							class='btns dFlex jEnd_aCenter' 
							style="color:#FB5D02;font-size: 12px;" 
							v-if='datas.ordergoods.length > 1 && (shop.trade_status == "20")'
						>申请售后</view>
						<view
							class='btns dFlex jEnd_aCenter' 
							style="color:#FB5D02;font-size: 12px;" 
							v-else-if='datas.ordergoods.length > 1 && shop.trade_status == "40"'
						>退货中</view>
						<view
							class='btns dFlex jEnd_aCenter' 
							style="color:#FB5D02;font-size: 12px;" 
							v-else-if='datas.ordergoods.length > 1 && shop.trade_status == "50"'
						>已退货</view>
					</view>
				</view>
			</view>
			<view class="config">
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">商品总额</view>
					<view class="lineVal">{{datas.total_price?datas.total_price:'0.00'}}</view>
				</view>
				<!-- <view class="line dFlex jBetween_aCenter">
					<view class="lineTit">运费</view>
					<view class="lineVal">{{datas.ship_money?datas.ship_money:'0.00'}}</view>
				</view> -->
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">优惠</view>
					<view class="lineVal">0.00</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<view class="lineTit">{{datas.is_pay==0?'待付款':"实付款"}}</view>
					<view class="lineVal showPrice">{{datas.total_money}}</view>
				</view>
			</view>
			<!-- <view class="orderCount dFlex jBetween_aCenter">
				<view class="pay">{{datas.is_pay==0?'待付款':"已付款"}}：{{datas.total_money}}</view>
				<view class="btns dFlex jEnd_aCenter">
					<view class="btn" v-if="datas.status == '0'" @tap.stop='cancelOrder'>取消订单</view>
					<view class="btn" v-if="datas.status == '90'" @tap.stop='delOrder'>删除订单</view>
					<view class="btn" v-if="datas.status == '20'" @tap.stop='lookWuliu'>查看物流</view>
					<view class="btn" v-if="datas.status == '30'" @tap.stop='pinglun'>评价商品</view>
					<view class="pay btn" v-if="datas.status == '0'" @tap.stop='payOrder'>立即付款</view>
				</view>
			</view> -->
		</view>
		<view class="orderLine">
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">订单编号</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<text>{{datas.orderno}}</text>
					<text class="copy" @tap='copy'>复制</text>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTit">下单时间</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<text>{{datas.createtime}}</text>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter" v-if="datas.status != '0'">
				<view class="lineTit">支付时间</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<text>{{datas.pay_time}}</text>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter" v-if="datas.status != '0'">
				<view class="lineTit">支付方式</view>
				<view class='lineVal dFlex jEnd_aCenter'>
					<text>{{datas.pay_type == 'wxpay'?"微信支付":''}}</text>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter" v-if='isPT == "1"'>
				<view class="lineTit">订单佣金</view>
				<view class='lineVal dFlex jEnd_aCenter showPrice'>
					{{datas.commission?datas.commission:'0.00'}}
				</view>
			</view>
		</view>
		<view class="seat" v-if='isPT!="1"'></view>
		<button open-type="contact" hover-class="none" class="service imgPublic">
			<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/service.png" mode="widthFix"></image>
		</button>
		<view :class="['opbtn','dFlex','jEnd_aCenter',device == 'ios'?'ios_safe':'']" v-if='isPT!="1"'>	
			<view class="btn" v-if="datas.status == '0'" @tap.stop='cancelOrder'>取消订单</view>
			<view class="btn" v-if="datas.status == '10'" @tap.stop='cancelOrder2'>取消订单</view>
			<view class="btn" v-if="datas.status == '20'" @tap.stop='afterSale()'>申请售后</view>
			<view class="btn" v-if="datas.status == '90'" @tap.stop='delOrder'>删除订单</view>
			<!-- <view class="btn" v-if="datas.status == '20'" @tap.stop='lookWuliu'>查看物流</view> -->
			<!-- <view class="btn" v-if="datas.status == '30'" @tap.stop='pinglun'>评价商品</view> -->
			<view class="buyNow" v-if="datas.status == '0'" @tap.stop='payOrder'>立即付款</view>
			<!-- <view class="addCar" @tap='addCar' v-if="datas.status == '50' || datas.status == '60' || datas.status == '90'">加入购物车</view>
			<view class="buyNow" @tap='beforeOrder' v-if="datas.status == '50' || datas.status == '60' || datas.status == '90'">再次购买</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPT:'',
				orderId:'',
				datas:{},
				device:getApp().globalData.platform,
				link:'',
			};
		},
		onLoad(e) {
			this.link = this.tool.objToUrl(e);
			this.orderId = e.orderId;
			this.isPT = e.isPT ? e.isPT : '0'; 
		},
		onShow(){
			this.initData();
		},
		onShareAppMessage() {
			this.tool.monitor(this.link);
			return {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			this.tool.monitor(this.link);
			let share = {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			// 数据
			initData(){
				let url = this.isPT == '1' ? '/api/sell/orderList' : '/api/mall/orderList'; 
				this.tool.getData(url,{
					ids:this.orderId
				}).then(res=>{
					// console.log(res);
					if(res){
						var orderOne = this.isPT != '1' ? res[0] : res.list[0];
						orderOne.address_json = JSON.parse(orderOne.address_json);
						orderOne.receive_address_json = JSON.parse(orderOne.receive_address_json);
						orderOne.createtime = this.tool.timestampToTime(orderOne.createtime * 1000);
						orderOne.pay_time = orderOne.is_pay?this.tool.timestampToTime(orderOne.pay_time * 1000):'';
						orderOne.ordergoods.map((item2,index2)=>{
							var reg=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
							if(!reg.test(item2.goods.main_img)){
								item2.goods.main_img = 'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com'+item2.goods.main_img;
							}
						})
						this.datas = orderOne;
						console.log(this.datas);
						this.$forceUpdate();
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 直接下单
			beforeOrder(){
				let shopInfo = [];
				this.datas.ordergoods.map((item,index)=>{
					shopInfo.push({
						id:item.goods_id,
						main_img:item.goods.main_img,
						title:item.goods.goods_title,
						count:item.goods_num,
						specName:item.goods_attr?item.goods_attr:'默认',
						specId:item.goods_attr_id?item.goods_attr_id:'',
						showPrice:item.goods_price,
					})
				})
				uni.redirectTo({
					url:'../seller/beforeOrder?status=1&shopInfo='+JSON.stringify(shopInfo),
				})
			},
			// 加入购物车
			addCar(){
				this.datas.ordergoods.map((item,index)=>{
					this.tool.getData('/api/mall/addShoppingCart',{
						goods_id:item.goods_id,
						goods_attr_id:item.goods_attr_id,
						num:item.goods_num
					}).then(res=>{
						if(res){
							if(index == this.datas.ordergoods.length-1){
								uni.showToast({
									title:'所有商品已添加到购物车',
									icon:"none"
								})
								setTimeout(()=>{
									uni.switchTab({
										url:'/pages/car'
									})
								},1650)
							}
						}
					}).catch(err=>{
						console.log(err);
					})
				})
			},
			// 某一个商品申请售后 goods_num
			afterSale(shop){
				if(shop){
					uni.navigateTo({
						url:'./afterSale?order_id='+this.orderId+'&order_detail_id='+shop.id+'&refund_num='+shop.goods_num,
					})
				}else{
					uni.navigateTo({
						url:'./afterSale?order_id='+this.orderId,
					})
				}
				
			},
			// 已支付的订单 申请售后
			cancelOrder2(id,idx){
				uni.showModal({
					content:'确定取消本条总订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('/api/refund/submitRefund',{
								order_id:this.orderId,
								refund_num:'0',
								refund_type:'1',
								refund_reason:'取消订单'
							}).then(res=>{
								if(res){
									this.initData();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
				})
			},
			// 取消订单
			cancelOrder(){
				uni.showModal({
					content:'确定取消该订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('/api/mall/cancelOrder',{
								id:this.datas.id,
							}).then(res=>{
								if(res){
									this.initData();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 删除订单
			delOrder(){
				uni.showModal({
					content:'确定删除该订单？',
					success: (op) => {
						if(op.confirm){
							this.tool.getData('/api/mall/deleteOrder',{
								id:this.datas.id,
							}).then(res=>{
								if(res){
									uni.showToast({
										title:"订单已删除",
										icon:"success"
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1650)
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					}
				})
			},
			// 支付订单
			payOrder(){
				this.tool.getData('/api/mall/orderPay',{
					oid:this.datas.id,
				}).then(res=>{
					console.log(res);
					if(res){
						uni.requestPayment({
							provider:'wxpay',
							timeStamp:res.info.timeStamp,
							nonceStr:res.info.nonceStr,
							package:res.info.package,
							signType:res.info.signType,
							paySign:res.info.paySign,
							success: (pay) => {
								uni.showToast({
									title:'订单支付成功',
									icon:"success"
								})
								this.initData();
							},
							fail:(err)=>{
								console.log(err);
								uni.showToast({
									title:'取消支付',
									icon:"none"
								})
							}
						})
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 复制订单编号
			copy(){
				uni.setClipboardData({
					data:this.datas.orderno,
					success: () => {
						uni.showToast({
							title:'内容已复制',
							icon:"none"
						})
					}
				})
			},
			// 返回
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 查看物流
			lookWuliu(line){
				uni.navigateTo({
					url:'./logistics?id='+this.datas.id,
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
	}
	.orderDetail{
		width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
		.teamInfo{
			width:100%;
			margin: 0 auto;
			background: white;
			padding: 24rpx;
			margin-bottom: 12px;
			border-radius: 20rpx;
			.base{
				width: 100%;
				margin-bottom: 6px;
				color: #666666;
				.info_content{
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.timeDetail{
					flex: none;
					width: max-content!important;
					color: white;
					background: linear-gradient(180deg, #FCB900 0%, #FF6319 100%);
					font-size: 12px;
					padding: 4rpx 10rpx;
					border-radius: 8rpx;
				}
				.baseLeft{
					width: 82%;
				}
				/* .exchange{
					width: auto;
					margin-left: 6px;
					font-size: 12px;
					.rightIcon{
						width: 20px;
						margin-left: 2px;
					}
				} */
				.titles{
					font-weight: bold;
					margin-right: 6px;
					.addIcon{
						width: 16px;
						height: 16px;
						margin-right: 6px;
					}
				}
			}
			.base:last-child{
				margin: 0;
			}
			.userInfo{
				padding:0 0 8px;
				border-bottom: 1px solid #F5F6F7;
				margin-bottom: 12px;
				.tuanzhang{
					flex: 1;
					.tag{
						width: max-content;
						font-size: 12px;
						color: #FB5D02;
						line-height: 20px;
						padding: 0 8px;
						border-radius: 40px;
						background: linear-gradient(90deg, #FEE2A2 0%, #FDEACA 100%);
						font-weight: bold;
						margin-left: 8px;
					}
					.userTx{
						width: 40px;
						height: 40px;
						border-radius: 50%;
						margin-right: 12px;
						image{
							width: 40px;
							height: 40px;
						}
					}
				}
				.distance{
					width: auto;
					color: #666666;
					.distanceIcon{
						width: 16px;
						margin-right: 4px;
					}
				}
			}
		}
		.add{
			width: 100%;
			padding: 12px;
			box-sizing: border-box;
			background: white;
			border-radius: 8px;
			margin: 12px 0;
			.address{
				margin-top: 8px;
				padding-top: 8px;
				border-top: 1px solid #f2f2f2;
				.addDetail{
					font-weight: bold;
					margin-bottom: 6px;
				}
				.storeInfo{
					width: 100%;
					.showAdd{
						flex: 1;
						font-size: 12px;
						color:#9c9c9c;
					}
				}
			}
			.user{
				font-weight: bold;
			}
			.addIcon{
				width: 24px;
				height: 24px;
				margin-right: 4px;
			}
			.selAdd{
				flex: 1;
				.showAdd{
					font-size: 14px;
					margin-top: 8px;
					color:#666666;
				}
				.userInfo{
					font-size: 15px;
					.username{
						margin-right: 10px;
					}
				}
			}
			.unselAdd{
				flex: 1;
				font-size: 16px;
				color: #666666;
			}
			.rightIcon{
				width: 20px;
				height: 20px;
			}
		}
		.opbtn{
			width: 100%;
			padding:8px 16px;
			box-sizing: border-box;
			background: white;
			position:fixed;
			bottom:0;
			left:0;
			.addCar{
				padding: 8px 20px;
				border-radius: 40px;
				border:1px solid #F0A63B;
				color:#F0A63B;
			}
			.buyNow{
				padding: 8px 20px;
				border-radius: 40px;
				border:1px solid #FD6524;
				color:#FD6524;
				margin-left: 12px;
			}
			.btn{
				padding: 8px 20px;
				border-radius: 40px;
				border:1px solid #D6D6D6;
				margin-right: 12px;
			}
		}
		.service{
			width:44px;
			height:44px;
			position: fixed;
			right: 12px;
			bottom:28%;
		}
		.orderLine{
			width: 100%;
			padding: 12px 12px 0;
			box-sizing: border-box;
			color: #666666;
			background: white;
			border-radius: 4px;
			overflow: hidden;
			margin-bottom: 20px;
			.line{
				margin-bottom: 12px;
				.lineVal{
					color: #333333;
				}
				.showPrice{
					font-size: 18px;
					font-weight: bold;
					color: #EB0C0C;
				}
				.copy{
					display: inline-block;
					padding:2px 4px;
					margin-left: 10px;
					border: 1px solid #999999;
					border-radius: 4px;
				}
			}
		}
		.part{
			padding: 12px;
			box-sizing: border-box;
			border-radius: 4px;
			background: white;
			margin-bottom: 12px;
			.orderCount{
				width: 100%;
				padding:12px 0 0;
				font-weight: bold;
				box-sizing: border-box;
				.btns{
					width: auto;
					.btn{
						font-size: 12px;
						width: max-content;
						border-radius: 40px;
						color: #999999;
						border: 1px solid #D6D6D6;
						padding: 4px 12px;
						margin-left: 8px;
					}
					.pay{
						font-weight: 400;
						color: $col_active;
						border-color: $col_active;
					}
				}
				.pay{
					font-weight: bold;
				}
			}
			.config{
				// border-bottom: 1px solid #F5F6F7;
				.line{
					width: 100%;
					font-size: 14px;
					margin-bottom: 12px;
					.lineTit{
						color: #666666;
					}
					.showPrice{
						font-size: 18px;
						font-weight: bold;
						color: #EB0C0C;
					}
				}
				.line:last-child{
					margin:0;
				}
			}
			.shangpin{
				width: 100%;
				margin-bottom: 8px;
				.shopImg{
					width:80px;
					height: 80px;
					overflow: hidden;
					background: white;
					margin-right: 12px;
					border-radius: 8px;
				}
				.other{
					flex: 1;
					.shopName{
						font-size: 15px;
					}
					.user{
						font-size: 12px;
						color: #666666;
						margin-left:5px;
						.rmb{
							color: #333333;
						}
						.price{
							color: #333333;
							font-size: 14px;
							display: inline-block;
						}
					}
					.selSpec{
						font-size: 12px;
						color: #999999;
						margin: 8px 0 4px;
						.spec{
							font-size: 14px;
						}
					}
				}
			}
			.kecheng{
				width: 100%;
				border-bottom: 1px solid #F5F6F7;
				margin-bottom: 12px;
				.btns{
					margin: 12px 0;
					.tk{
						width: max-content;
						font-size:12px;
						color: #999999;
						line-height: 24px;
						padding: 0 10px;
						border-radius: 40px;
						border: 1px solid #D6D6D6;
					}
				}
				.orderTime{
					font-size: 12px;
					color: #999999;
				}
				.shopInfo{
					width:100%;
					margin-bottom: 12px;
					.base{
						flex: 1;
						.shopName{
							flex: 1;
						}
						.tags{
							line-height: 16px;
							font-size: 12px;
							padding: 0 4px;
							color: white;
							border-radius: 4px;
							background: $col_active;
							margin-right: 8px;
						}
					}
					.price{
						font-size: 12px;
						color: #FF0000;
					}
				}
			}
		}
		.ios_pageTitle,.and_pageTitle{
			background: white;
			.pageTitle{
				.title{
					flex: 1;
					margin: 0 12px;
					text-align: left;
					font-weight: bold;
					font-size: 17px;
				}
			}
		}
	}
</style>
